<template>
  <div class="out-box">
    <!--      顶部的选择条件-->
    <div class="top-row-box">
      <div class="info-in-box margin-right">
        <span class="title" style="margin-left: 15px;width: 150px;">选择状态:</span>
        <el-select v-model="status" @change="initPage();getAllProduct()" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="title" style="margin-left: 15px;width: 150px;">选择产品:</span>
        <el-select v-model="productName" @change="initPage();getAllProduct();" placeholder="请选择">
          <el-option
            v-for="item in productOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" style="width: 70px;height: 90%;" @click="getAllProduct()">查询</el-button>
      <!--    删除产品预约记录-->
      <div class="top-row-box">
        <div class="info-in-box margin-right">
          <div>
            <span class="title" style="float: left;margin-left: 20px;">删除预约:</span>
            <el-select v-model="deleteTimePeriod" placeholder="请选择">
              <el-option
                v-for="item in deleteList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <el-button type="danger" size="small" style="height: 80%;margin: 5px 0 0 15px;" @click="deleteAppoint">删除</el-button>
        </div>
      </div>
    </div>

    <div class="top-row-box" v-if="productName !== ''">
      <div class="info-in-box margin-right" style="margin-bottom: -20px;">
        <span class="title" style="float:left;width: 240px;">{{productName}}需要总数为:{{needNum}}</span>
      </div>
    </div>

    <!--      表格位置-->
    <div class="button-table-box">
      <span class="treat-room-text"></span>
      <table-list :tableAllData="tableAllData" @getTableData="getTableData" ref="tableList"></table-list>
      <page-pagination :page-list="pageList" ref="pagePagination"></page-pagination>
    </div>
  </div>
</template>

<script>
import {getAppointDetail, getPatientList} from "@/api/doctor";
import {dateFormYMD} from "@/common/js/dateFormYMD";
import {tips} from "@/common/js/optionTips";
import {getGender, getTimePeriod} from "@/common/js/timeFilters";
import {getCookie} from "@/utils/cookies";
import {updateTreatStatusFinish, updateStatusAgain} from "@/api/patient";
import {appointProduct, appointProductStatus, appointStatus} from "@/common/js/appointStatus";
import app from "@/store/modules/app";
import {
  cancelProductAppointment,
  completeProductAppointment,
  deleteProduct, deleteProductAppoint,
  getAllProduct,
  getAllProductAppoint
} from "@/api/product";
import {deleteAppoint} from "@/api/outCall";

export default {
  name: "appointProduct",
  data() {
    return {
      //需要产品数
      needNum:0,
      deleteTimePeriod:'',
      deleteList:[ {
        value: '1',
        label: '一个月以外'
      }, {
        value: '2',
        label: '三个月以外'
      }, {
        value: '3',
        label: '半年以外'
      }, {
        value: '4',
        label: '一年以外'
      }],
      isAdmin: getCookie('username') === 'admin' ? '' : getCookie('username'),
      appointDate: '', // 顶部选择的日期
      ctTimeID: 1,
      // 选择产品
      productName:'',
      productOptions:[],
      // 选择状态
      statusOptions: [
        {
          value: '已预约',
          label: '已预约'
        }, {
          value: '已完成',
          label: '已完成'
        },{
          value: '已取消',
          label: '已取消'
        }],
      status: '已预约',
      doctorOptions: [],
      doctor: '全部',
      // 表格数据
      tableAllData: {
        dataNull: false,
        tableTitle: [{
          prop: 'ID',
          label: '编号',
          width: '100',
        }, {
          prop: 'name',
          label: '姓名',
          width: '100',
        }, {
          prop: 'phone',
          label: '手机号',
          width: '100',
        },{
          prop: 'productName',
          label: '产品名称',
          width: '100'
        },
          {
            prop:'num',
            label: '预约数量',
            width: '80'
          },
          {
            prop: 'appointDate',
            label: '预约日期',
            width: '150',
          },{
            prop: 'Status',
            label: '状态',
            width: '150',
          }],
        tableData: [],
        option: {
          width: '350',
          button: [

          ]
        }
      },
      isTimeTreat: false,
      isClickTreat: false,
      // 底部分页的数据
      pageList: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      statusData: []
    }
  },
  methods: {
    // 删除产品预约记录
    deleteAppoint(){
      if(this.deleteTimePeriod === ''){
        tips('error','请选择删除的时间段');
        return;
      }
      this.$confirm('确认删除'+this.deleteList[this.deleteTimePeriod-1].label+'的产品预约记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(()=>{
        console.log('删除',this.deleteTimePeriod);
        deleteProductAppoint(this.deleteTimePeriod).then(res=>{
          if(res.code === 200){
            tips('success','删除'+this.deleteList[this.deleteTimePeriod-1].label+'的产品预约记录成功')
            this.getAllProduct()
          }
        })
      })
    },
    // 从选择框切换状态初始化分页参数
    initPage:function (){
      this.pageList.pageNum = 1;
      this.pageList.pageSize = 10;
    },
    // 获取从表格中获取的按钮的事件
    getTableData: function(option){
      let id = option.scopeRow.ID
      if (option.buttonName === '确认') {
        this.$confirm('确认预约成功吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          completeProductAppointment(id).then(res=>{
            if(res.code === 200){
              tips('success','完成预约成功')
              this.getAllProduct()
            }
          }).catch(()=>{
            tips('error','完成预约失败')
          })
        })
      } else if (option.buttonName === '取消') {
        this.$confirm('确认取消预约吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          cancelProductAppointment(id).then(res=>{
            if(res.code === 200){
              tips('success','取消预约成功')
              this.getAllProduct()
            }
          }).catch(()=>{
            tips('error','取消预约失败')
          })
        })
      }
    },
    // 根据条件查询预约列表
    getAllProduct: function () {
      this.getProductNum()
      //更新产品信息
      this.getProductName()
      this.statusData = [];
      this.tableAllData.tableData = [];
      //let date = dateFormYMD(this.appointDate);
      let that = this;
      let data = {
        productName:this.productName,
        userName:'',
        status:appointProduct(this.status)
      }
      getAllProductAppoint(this.pageList.pageNum,this.pageList.pageSize,data).then(res => {
        if (res.code === 200) {
          console.log('res',res)
          this.pageList = {
            pageNum: res.data.current,
            pageSize: res.data.size,
            total: res.data.total
          };
          let data = res.data.records
          // 先将按钮数组置空
          this.tableAllData.option.button = []
          // 如果预约选择的是未开始状态
          if(this.status === '已预约') {
            this.tableAllData.option.button.push({
                size: 'mini',
                type: 'success',
                name: '确认'
              },
              {
                size: 'mini',
                type: 'danger',
                name: '取消'
              })
          }
          if (data.length === 0){
            this.tableAllData.dataNull = true;
            return;
          }
          data.forEach(function (item,index){
            let time = item.gmtCreate.split(' ')
            if(that.status === appointProductStatus(item.ok)){
              that.tableAllData.tableData.push({
                ID:item.id,
                name:item.userName,
                phone:item.phone,
                num:item.buycount,
                productName: item.productName,
                appointDate:time[0],
                Status:that.status,
              })
            }
          })
          this.tableAllData.dataNull = false;
        }
      }).catch(() => {
        tips('error', '获取预约列表失败 ');
        this.tableAllData.dataNull = true;
      })
    },
    //根据产品名称找需要产品数
    getProductNum:function (){
      let that = this
      this.productOptions.forEach(function (item){
        console.log(item)
        if(item.value === that.productName){
          that.needNum = item.needNum
        }
      })
      console.log('needNum',this.needNum)
    },
    //获取产品名称和需要产品数
    getProductName:function(){
      getAllProduct('','',1,20,'','').then(res=>{
        let that = this
        that.productOptions = []
        if(res.code === 200){
          res.data.records.forEach(function (item){
            that.productOptions.push({
              value:item.name,
              label:item.name,
              needNum:item.needCount
            })
          })

        }
      })
    },
    // 子组件分页通过调用父组件的方法进行调用更新表格
    fatherMethod: function (pageNum, pageSize) {
      this.pageList.pageNum = pageNum;
      this.pageList.pageSize = pageSize;
      this.getAllProduct(pageNum,pageSize)
    },
  },
  created() {
    this.getAllProduct()
  }
}
</script>

<style lang="scss">
@import "src/common/scss/common";
.out-box{
  @include width-margin(90%, 100%);
  .top-row-box{
    width: 100%;
    height: 100%;
    @include flex-direction(row);
    align-items: center;
    .margin-right{
      margin-right: 30px;
    }
  }
}
.button-table-box{
  @include width-margin(100%, 100%);
  margin-top: 15px;
  .treat-room-text{
    margin-top: 20px;
    @include font-style(16px, $major-blue-color);
    margin-bottom: 5px;
    display: flex;
    justify-content: flex-start;
  }
}
</style>
